
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/>
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<div id="app">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header">
                <h2>Router Basic - 04</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
                <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
                <a class="list-group-item" v-link="{ path: '/about'}">About</a>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel">
                <div class="panel-body">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="well">
                <p>当前路径：<code>{{$route.path}}</code></p>
                <p>当前参数：<code>{{$route.params | json}}</code></p>
                <p>路由名称：<code>{{$route.name}}</code></p>
                <p>路由查询参数：<code>{{$route.query | json}}</code></p>
                <!--<p>路由匹配项：<code>{{$route.matched | json}}</code></p>-->
            </div>
        </div>
    </div>

<pre>
    路由对象暴露了以下属性：

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query
对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。
在页面上添加以下代码，可以显示这些路由对象的属性：

<div>
    <p>当前路径：{{$route.path}}</p>
    <p>当前参数：{{$route.params | json}}</p>
    <p>路由名称：{{$route.name}}</p>
    <p>路由查询参数：{{$route.query | json}}</p>
    <p>路由匹配项：{{$route.matched | json}}</p>
</div>
$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，看示例就能知道它们代表的含义。
</pre>



</div>

<template id="home">
    <div>
        <h1>Home</h1>
        <p>{{msg}}</p>
    </div>
    <div>
        <ul class="nav nav-tabs">
            <li>
                <a v-link="{ name: 'news'}">News</a>
            </li>
            <li>
                <a v-link="{ path: '/home/message'}">Messages</a>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<template id="news">
    <div>
        <ul>
            <li>
                <a v-link="{ path: '/home/news/detail/01?favorite=yes'}">News 01</a>
            </li>
            <li>
                <a href="javascript:void(0)" @click="viewDetail">News 02</a>
            </li>
            <li>
                <a v-link="{ path: '/home/news/detail/03'}">News 03</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>
<template id="newsDetail">
    <div>
        News Detail - {{$route.params.id}} ......
    </div>
</template>

<template id="message">
    <ul>
        <li>Message 01</li>
        <li>Message 02</li>
        <li>Message 03</li>
    </ul>
</template>

<template id="about">
    <div>
        <h1>About</h1>
        <p>This is the tutorial about vue-router.</p>
    </div>
</template>

</body>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    var Home = Vue.extend({
        template: '#home',
        data: function() {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var News = Vue.extend({
        template: '#news',
        methods: {
            viewDetail: function() {
                this.$route.router.go({
                    name: 'detail',
                    params: {
                        id: '02'
                    }
                })
            }
        }
    })

    var NewsDetail = Vue.extend({
        template: '#newsDetail'
    })

    var Message = Vue.extend({
        template: '#message'
    })

    var About = Vue.extend({
        template: '#about'
    })

    var router = new VueRouter()
    router.redirect({
        '/': '/home'
    })
    router.map({
        '/home': {
            component: Home,
            subRoutes: {
                '/news': {
                    name: 'news',
                    component: News,
                    subRoutes: {
                        'detail/:id': {
                            name: 'detail',
                            component: NewsDetail
                        }
                    }
                },
                '/message': {
                    component: Message
                }
            }
        },
        '/about': {
            component: About
        }
    })

    var App = Vue.extend({})
    router.start(App, '#app')
</script>

</html>